<template>
	<view class="page">
		<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true' @clickItem="onClickItem" ></tabControl>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" @change='scollSwiper' style="height: 1249rpx;" :current='current'>
			<swiper-item v-for="(item,index) in items1" :key='index'>
				<!-- 使用 scroll-view 来滚动内容区域 -->
				<scroll-view scroll-y="true">
					<image :src="item" style="width:750rpx;height: 1249rpx;"></image>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
	    components: { tabControl },
	    data() {
	        return {
	            items: ['打卡教程', '消费者教程', '事业合伙人教程','商家教程'],
				items1: ['https://www.quyidian.com.cn/uploads/tool/course_1.png', 'https://www.quyidian.com.cn/uploads/tool/course.png', 'https://www.quyidian.com.cn/uploads/tool/course_2.png','https://www.quyidian.com.cn/uploads/tool/course_3.png'],
	            current: 0
	        };
	    },
	    onLoad() {},
	    methods: {
	        onClickItem(val) {
	            this.current = val.currentIndex
	        },
	        scollSwiper(e){
	            this.current = e.target.current
	        }
	    }
	};
</script>

<style>
	page{
		padding-top:76rpx;
	}
	.Lu-xinshou-img{
		width: 750rpx;
		height: 2740rpx;
	}
</style>
